<template>
  <div class="homeContainer">
    <!-- 头部 -->
    <homeHeader :categoryList="categoryList"></homeHeader>

    <!-- swiper轮播 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="focus in focusList" :key="focus.id">
        <img style="width: 100%" :src="focus.picUrl" />
      </van-swipe-item>
    </van-swipe>

    <!-- 轮播图下面的广告 -->
    <van-row class="advert_row">
      <van-col
        class="advert_col"
        span="8"
        v-for="(advert, index) in advertList"
        :key="index"
      >
        <img :src="advert.icon" class="advertImg" />
        <span class="advertText">{{ advert.desc }}</span>
      </van-col>
    </van-row>

    <!-- grid宫格 -->
    <van-grid icon-size="1.5rem" :border="false" class="kingKongGrid" :column-num="5">
      <van-grid-item
        style="margin-top: -0.53rem"
        v-for="(news, index) in newArrivalList"
        :key="index"
        :icon="news.picUrl"
        :text="news.text"
        :url="news.schemeUrl"
      />
    </van-grid>

    <!-- 爆款直降 -->
    <a class="popular" :href="floorList.schemeUrl">
      <van-swipe
        duration="0"
        :show-indicators="false"
        class="popularImg"
        :autoplay="3000"
      >
        <van-swipe-item v-for="floor in floorList.itemList" :key="floor.id">
          <img :src="floor.picUrl" alt="" />
          <!-- {{ floor.picUrl }} -->
        </van-swipe-item>
      </van-swipe>
    </a>

    <!-- 防护指南 -->
    <!-- <van-row>
      <van-col span="8" v-for="(h, index) in handbookList" :key="index">
        <a
          :href="h.schemeUrl"
          class="handbook"
          :style="{ 'background-image': `url(${h.picUrl})` }"
        >
          <img :src="h.itemList[0].picUrl" alt="" />
        </a>
      </van-col>
    </van-row> -->

    <!-- 新人专享 -->
    <div class="people">
      <span>—</span>
      <span>新人专享礼</span>
      <span>—</span>
    </div>

    <van-row class="newPeople" justify="center">
      <van-col class="newPeopleCol" span="12">
        <div class="newPeopleLeft">
          <span>新人专享红包</span>
          <img src="./images/newPeople.png" alt="" />
        </div>
      </van-col>
      <van-col class="newPeopleCol" span="12">
        <div class="newPeopleRight">
          <div
            class="newPeopleRightTop"
            v-for="(inam, index) in indexActivityModule"
            :key="index"
          >
            <p class="newPeopleTitle1">{{ inam.title }}</p>
            <p class="newPeopleTitle2">{{ inam.subTitle }}</p>
            <p class="newPeopleTitle2">{{ inam.tag }}</p>
            <img :src="inam.showPicUrl" alt="" />
            <div class="price">
              <p>{{ inam.activityPrice }}</p>
              <p>{{ inam.originPrice }}</p>
            </div>
          </div>
        </div>
      </van-col>
    </van-row>

    <!--类目热销榜 -->
    <div class="hot">
      <p>{{ categoryHotSellModule.title }}</p>
      <van-row class="hotRow">
        <van-col
          class="hotCol12"
          span="12"
          v-for="(item, index) in categoryHotSellModule.categoryList.splice(0, 2)"
          :key="index"
        >
          <div>
            <p>{{ item.categoryName }}</p>
            <span>—</span>
            <img :src="item.showPicUrl" alt="" />
          </div>
        </van-col>

        <van-col
          class="hotCol6"
          span="6"
          v-for="(item, index) in categoryHotSellModule.categoryList"
          :key="index"
        >
          <div>
            <p>{{ item.categoryName }}</p>
            <img :src="item.showPicUrl" alt="" />
          </div>
        </van-col>
      </van-row>
    </div>

    <!-- 新衣和严选 -->
    <div class="attire">
      <van-row class="attireRow">
        <van-col class="attrireCol" span="12">
          <a :href="clothes.targetUrl">
            <p>{{ clothes.title }}</p>
            <p>{{ clothes.desc }}</p>
            <img :src="clothes.picUrl" alt="" />
          </a>
        </van-col>
        <van-col class="attrireCol" span="12">
          <a :href="strictSelect.targetUrl">
            <p>{{ strictSelect.title }}</p>
            <p>{{ strictSelect.desc }}</p>
            <img :src="picUrlOne" alt="" />
            <img
              class="attrireImg"
              :src="picUrlTow"
              alt=""
            />
          </a>
        </van-col>
      </van-row>
    </div>

    <!-- footer -->
    <div class="footerContainer">
      <van-row justify="center">
        <van-col class="footerCol" span="5">
          <a href="">下载APP</a>
        </van-col>
        <van-col class="footerCol" span="5">
          <a href="">电脑版</a>
        </van-col>
      </van-row>
      <p>网易公司版权所有 @ 1997-2022</p>
      <p>食品经营许可证：JY13301080111719</p>
    </div>

    <!-- 礼物图标 -->
    <a href="https://act.you.163.com/act/pub/qAU4P437asfF.html" class="gift">
      <i></i>
    </a>

    <!-- 回到顶部 -->
    <van-back-top class="backTop" bottom="60" right="10" offset="700">
      <van-icon name="arrow-up" color="#ccc" />
    </van-back-top>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
// import { useRouter } from 'vue-router';
import homeApi, {
  type CateGoryList,
  type FocusList,
  type AdvertList,
  type ClassificationListModel,
  type PopularModel,
  type IndexActivityModuleModel,
  type CategoryHotSellModuleModel,
  type StyleBannerAndItemModel
} from '../../api/home'
// const router = useRouter()
// const keyword = ref('')

// 获取tab栏数据
const categoryList = ref<CateGoryList>([])
// 获取轮播图数据
const focusList = ref<FocusList>([])
// 获取广告数据
const advertList = ref<AdvertList>([])
// 获取新品首发宫格数据
const newArrivalList = ref<ClassificationListModel>([])

// 初始化爆款直降的数据
const initPopularList = (): PopularModel => ({
  schemeUrl: '',
  picUrl: '',
  itemList: []
})
// 爆款里的小轮播
const floorList = ref<PopularModel>(initPopularList())

// 爆款下的指南
const handbookList = ref<PopularModel[]>([])

// 新人专享
const indexActivityModule = ref<IndexActivityModuleModel>([])

// 类目热销榜
const categoryHotSellModule = ref<CategoryHotSellModuleModel>({
  categoryList: [],
  title: ''
})

// 新衣
const clothes = ref<StyleBannerAndItemModel>({
  descColor: '',
  picUrl: '',
  titleColor: '',
  title: '',
  targetUrl: '',
  desc: ''
})
// 严选
const strictSelect = ref<StyleBannerAndItemModel>({
  descColor: '',
  picUrlList: [],
  titleColor: '',
  title: '',
  targetUrl: '',
  desc: ''
})
// 严选第一张图
const picUrlOne = ref<string>('')
// 严选第二张图
const picUrlTow = ref<string>('')

// tab栏相关回调
const getCategoryListData = (async () => {
  try {
    let res = await homeApi.getCategoryList()
    // 更新tab栏数据
    categoryList.value = res.data.categoryList

    const idList = categoryList.value.map(item=>item.id)
    localStorage.setItem('categoryId',JSON.stringify(idList))

    // console.log(res);
  } catch (error) {
    console.log(error);
  }
})

// 推荐相关回调
const getRecommendListData = (async () => {
  try {
    let res = await homeApi.getRecommendList()
    // 更新轮播图数据
    focusList.value = res.data.data.focusList
    // console.log('res', res);
    // console.log('推荐', res.data.data);
    // 更新广告数据
    advertList.value = res.data.data.policyDescList
    // 更新新品首发数据
    newArrivalList.value = res.data.data.kingKongModule.kingKongList
    // 更新爆款里的小轮播数据
    floorList.value = res.data.data.bigPromotionModule.floorList[0].cells[0]
    // 更新爆款下的指南
    // handbookList.value = res.data.data.bigPromotionModule.floorList[1].cells
    // 更新新人专享
    indexActivityModule.value = res.data.data.indexActivityModule
    // 更新类目热销榜
    categoryHotSellModule.value = res.data.data.categoryHotSellModule
    
    // 更新新衣与严选
    clothes.value = res.data.data.sceneLightShoppingGuideModule[0].styleBanner
    strictSelect.value = res.data.data.sceneLightShoppingGuideModule[1].styleItem
    picUrlOne.value = res.data.data.sceneLightShoppingGuideModule[1].styleItem.picUrlList[0]
    picUrlTow.value = res.data.data.sceneLightShoppingGuideModule[1].styleItem.picUrlList[1]

  } catch (error) {
    console.log(error);
  }
})


onMounted(() => {
  getCategoryListData()
  getRecommendListData()
})
</script>

<style scoped>
.homeContainer{
  height: 44rem;
}

.homeContainer span {
  font-size: 0.56rem;
}


/* 轮播 */
.my-swipe {
  height: 3.97rem;
  margin-top: -0.13rem;
}

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 0.53rem;
  text-align: center;
}


/* 轮播图下的广告 */
.advert_row {
  text-align: center;
  height: 0.6rem;
  line-height: 0.7rem;
  margin: 0 0.5rem 0 0.2rem;
}

.advertImg {
  vertical-align: middle;
  width: 0.5rem;
  margin-left: -0.27rem;
  margin-right: 0.13rem;
}

.advert_row .advertText {
  font-size: 0.32rem;
  line-height: 0.8rem;
}

/* grid宫格 */
.kingKongGrid {
  margin-top: 0.53rem;
}

/* 爆款 */
.popular {
  display: block;
  width: 100%;
  height: 2.67rem;
  background-image: url("./images/baokuan.gif");
  background-size: 100% 2.67rem;
  position: relative;
}

.popularImg {
  position: absolute;
  width: 2.17rem;
  height: 2.17rem;
  top: 0.21rem;
  left: 1.07rem;
  z-index: 999;
}

.popularImg img {
  width: 2.17rem;
}

/* 指南 */
.handbook {
  display: block;
  width: 90%;
  height: 2.85rem;
  background-size: 100%;
  margin: 0.27rem;
  margin-left: 0.19rem;
  position: relative;
}

.handbook img {
  position: absolute;
  width: 1.87rem;
  top: 1.07rem;
  left: 0.53rem;
}

/* 新人专享 */
.people {
  height: 1.33rem;
  margin-left: 2.93rem;
}

.people span {
  font-size: 0.53rem;
}

.people span:nth-child(2) {
  line-height: 1.6rem !important;
  font-size: 0.45rem;
  margin: 0 0.27rem 0;
  margin-top: 0.27rem;
}

.newPeople {
  height: 5.87rem;
}

.newPeople .newPeopleCol .newPeopleLeft {
  width: 4.56rem;
  height: 100%;
  background-color: #f9e9cf;
  margin-left: 0.4rem;
}

.newPeople .newPeopleCol .newPeopleLeft span {
  font-size: 0.43rem;
  padding-left: 0.4rem;
  line-height: 1.41rem;
  height: 0.53rem;
}

.newPeople .newPeopleCol .newPeopleLeft img {
  width: 3.47rem;
  margin: 0.13rem 0 0 0.53rem;
}

.newPeople .newPeopleCol .newPeopleRight {
  width: 4.56rem;
  height: 100%;
}

.newPeople .newPeopleCol .newPeopleRight .newPeopleRightTop {
  width: 4.56rem;
  height: 2.91rem;
  background-color: #f9e9cf;
  margin-bottom: 0.05rem;
  position: relative;
}

.newPeople .newPeopleCol .newPeopleRight .newPeopleRightTop .newPeopleTitle1 {
  font-size: 0.45rem;
  padding: 0.27rem 0 0 0.37rem;
}

.newPeople .newPeopleCol .newPeopleRight .newPeopleRightTop .newPeopleTitle2 {
  font-size: 0.32rem;
  color: gray;
  padding-left: 0.37rem;
}

.newPeople .newPeopleCol .newPeopleRight .newPeopleRightTop img {
  position: absolute;
  top: 0.43rem;
  left: 1.33rem;
  width: 80%;
  height: 90%;
}

.newPeopleRightTop .price {
  position: absolute;
  font-size: 0.24rem;
  top: 0.27rem;
  right: 0.53rem;
  width: 1.2rem;
  height: 1.2rem;
  opacity: 0.8;
  background: #f59524;
  border-radius: 50%;
  padding-top: 0.1rem;
  color: #fff;
  text-align: center;
  line-height: 0.5rem;
}

.newPeopleRightTop .price p:nth-child(2) {
  text-decoration: line-through;
}

/* 类目热销榜 */
.hot {
  margin-top: -0.4rem;
  margin-bottom: -0.53rem;
}
.hot p {
  margin: 1rem 0 0 0.42rem;
  font-size: 0.43rem;
}
.hot .hotRow {
  margin-left: 0.4rem;
  margin-top: 0.4rem;
}
.hot .hotRow .hotCol12 div {
  background-color: #f9f3e4;
  height: 2.67rem;
  width: 4.53rem;
  margin-top: -1.07rem;
  margin-bottom: 0.13rem;
  position: relative;
}
.hot .hotRow .hotCol12 div img {
  position: absolute;
  width: 57%;
  left: 2rem;
  top: 0;
}
.hot .hotRow .hotCol12 div p {
  line-height: 2.43rem;
  margin-left: 0.27rem;
  font-size: 0.37rem;
}
.hot .hotRow .hotCol12 div span {
  position: absolute;
  top: 1.25rem;
  left: 0.27rem;
  color: #333;
}
.hot .hotRow .hotCol6 div {
  height: 2.4rem;
  width: 2.2rem;
  background-color: #f5f5f5;
  margin-top: -1.01rem;
  margin-bottom: 0.11rem;
}
.hot .hotRow .hotCol6 div p {
  font-size: 0.35rem;
  margin-left: 0.27rem;
  line-height: 0.8rem;
}
.hot .hotRow .hotCol6 div img {
  width: 1.87rem;
  margin-left: 0.27rem;
  margin-top: -0.27rem;
}

/* 新衣和严选 */
.attire {
  margin-top: 1.07rem;
}
.attire .attireRow .attrireCol a {
  display: block;
  width: 4.57rem;
  height: 3.52rem;
  margin-left: 0.43rem;
  background-color: #f5f5f5;
  position: relative;
}
.attire .attireRow .attrireCol a img {
  position: absolute;
}
.attire .attireRow .attrireCol:nth-child(1) a img {
  width: 4.57rem;
  height: 3.52rem;
  top: 0;
  left: 0;
}
.attire .attireRow .attrireCol:nth-child(2) a img {
  width: 2rem;
  left: .27rem;
  top: 1.47rem;
}
.attire .attireRow .attrireCol:nth-child(2) a .attrireImg {
  left: 2.27rem;
}
.attire .attireRow .attrireCol:nth-child(2) a {
  display: block;
  margin-left: 0.08rem;
}
.attire .attireRow .attrireCol a p {
  padding-left: 0.4rem;
}
.attire .attireRow .attrireCol a p:nth-child(1) {
  padding-top: 0.37rem;
  font-size: 0.43rem;
}
.attire .attireRow .attrireCol a p:nth-child(2) {
  position: absolute;
  z-index: 99;
  font-size: 0.35rem;
  color: #7f7f7f;
}
.attire .attireRow .attrireCol:nth-child(2) a p:nth-child(2) {
  color: #ff6f0f;
}

/* footer */
.footerContainer{
  width: 100%;
  height: 3.25rem;
  background-color: #333;
  margin-top: .8rem;
}

.footerContainer a{
  font-size: .4rem;
  color: #fff;
}
.footerContainer .footerCol{
  border: .03rem solid gray;
  border-radius: .08rem;
  margin-right: .53rem;
  margin-left: .53rem;
  margin-top: .67rem;
}
.footerContainer .footerCol a{
  display: block;
  width: 2.85rem;
  height: .8rem;
  font-size: .32rem;
  padding-left: .4rem;
  line-height: .8rem;
}

.footerContainer p:nth-child(2) {
  padding-top: .48rem;
}
.footerContainer p {
  font-size: .32rem;
  color: #999;
  text-align: center;
}

/* 礼物图标 */
.gift{
  position: fixed;
  right: 0;
  bottom: 3.4rem;
  display: block;
  z-index: 10;
  -webkit-animation: moveLeft .5s;
  animation: moveLeft .5s;
}
.gift i {
  background-image: url('./images/gift.png');
  display: inline-block;
  vertical-align: middle;
  width: 1.52rem;
  height: 1rem;
  background-size: 4.37rem 4rem;
  background-position: -1.26rem -2.52rem;
}

/* 回到顶部 */

</style>
